<template>
  <div
    class="shelf-search-wrapper"
    :class="{
      'search-top': isInputClicked,
      'hide-shadow': isHideShadow,
    }"
  >
    <div class="shelf-search" :class="{ 'search-top': isInputClicked }">
      <!-- 书架搜索框 -->
      <div class="search-wrapper">
        <!-- 搜索图标 -->
        <div class="icon-search-wrapper">
          <span class="icon-search icon"></span>
        </div>

        <!-- 文本输入框 -->
        <div class="search-input-wrapper">
          <input
            type="text"
            class="search-input"
            :placeholder="$t('shelf.search')"
            @click="onSearchClick"
            v-model="searchText"
          />
        </div>

        <!-- X 图标 -->
        <div
          class="icon-clear-wrapper"
          v-show="searchText.length > 0"
          @click="clearSearchText"
        >
          <span class="icon-close-circle-fill"></span>
        </div>
      </div>

      <!-- 切换语言的图标 -->
      <div class="icon-locale-wrapper" v-if="!isInputClicked">
        <span
          class="icon-cn icon"
          v-if="lang === 'cn'"
          @click="switchLocale"
        ></span>
        <span
          class="icon-en icon"
          v-if="lang === 'en'"
          @click="switchLocale"
        ></span>
      </div>

      <!-- 取消文本 -->
      <div class="cancel-btn-wrapper" @click="onCancelClick" v-else>
        <span class="cancel-text">{{ $t('shelf.cancel') }}</span>
      </div>
    </div>

    <Transition name="hot-search-move">
      <!-- 点击输入框后，需要显示的tab栏 -->
      <div class="shelf-search-tab-wrapper" v-if="isInputClicked">
        <div
          class="shelf-search-tab-item"
          v-for="item in tabs"
          :key="item.id"
          @click="onTabClick(item.id)"
        >
          <span
            class="shelf-search-tab-text"
            :class="{ 'is-selected': item.id === selectedTab }"
          >
            {{ item.text }}
          </span>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script>
import { setLocalStorage } from '@/utils/localStorage';
import { storeShelfMixin } from '@/utils/mixin';

export default {
  mixins: [storeShelfMixin],
  computed: {
    lang() {
      return this.$i18n.locale;
    },
    tabs() {
      return [
        { id: 1, text: this.$t('shelf.default') },
        { id: 2, text: this.$t('shelf.progress') },
        { id: 3, text: this.$t('shelf.purchase') },
      ];
    },
  },
  data() {
    return {
      isInputClicked: false, // input框是否被点击
      searchText: '', // 搜索框文本
      selectedTab: 1, // 当前选中的tab栏
      isHideShadow: true, // 是否隐藏阴影
    };
  },
  watch: {
    offsetY(offsetY) {
      if (offsetY > 0 && this.isInputClicked) {
        this.isHideShadow = false; // 显示阴影
      } else {
        this.isHideShadow = true; // 隐藏阴影
      }
    },
  },
  methods: {
    // *清空输入框文本
    clearSearchText() {
      this.searchText = '';
    },

    // *点击搜索input框触发
    onSearchClick() {
      this.isInputClicked = true;
      this.setShelfTitleVisible(false);
    },

    // *点击取消文字触发
    onCancelClick() {
      this.isInputClicked = false;
      this.setShelfTitleVisible(true);
    },

    // *切换语言
    switchLocale() {
      if (this.lang === 'en') {
        this.$i18n.locale = 'cn';
      } else {
        this.$i18n.locale = 'en';
      }
      setLocalStorage('locale', this.$i18n.locale);
    },

    // *当前点击的Tab栏
    onTabClick(id) {
      this.selectedTab = id;
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
.shelf-search-wrapper {
  position: relative;
  z-index: 105;
  width: 100%;
  height: px2rem(94);
  font-size: px2rem(16);
  background: #fff;
  box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, 0.1);

  &.search-top {
    position: fixed;
    top: 0;
    left: 0;
  }
  &.hide-shadow {
    box-shadow: none;
  }

  .shelf-search {
    position: absolute;
    z-index: 105;
    top: px2rem(42);
    left: 0;
    width: 100%;
    height: px2rem(52);
    display: flex;
    transition: top $animationTime $animationType;
    &.search-top {
      top: 0;
    }

    .search-wrapper {
      flex: 1;
      display: flex;
      margin: px2rem(8) 0 px2rem(8) px2rem(10);
      border: px2rem(1) solid #ccc;
      border-radius: px2rem(3);

      .icon-search-wrapper {
        flex: 0 0 px2rem(22);
        @include right;
        .icon-search {
          font-size: px2rem(12);
        }
      }

      .search-input-wrapper {
        flex: 1;
        padding: 0 px2rem(10);
        box-sizing: border-box;
        @include center;

        .search-input {
          width: 100%;
          font-size: px2rem(14);
          border: none;
          color: #333;
          &:focus {
            outline: none;
          }
          &::placeholder {
            font-size: px2rem(14);
            color: #ccc;
          }
        }
      }

      .icon-clear-wrapper {
        flex: 0 0 px2rem(24);
        @include left;
        .icon-close-circle-fill {
          font-size: px2rem(14);
          color: #ccc;
        }
      }
    }

    .icon-locale-wrapper {
      flex: 0 0 px2rem(55);
      @include center;
      .icon-cn,
      .icon-en {
        font-size: px2rem(22);
        color: #666;
      }
    }

    .cancel-btn-wrapper {
      flex: 0 0 px2rem(55);
      @include center;
      .cancel-text {
        font-size: px2rem(14);
        color: $color-blue;
      }
    }
  }

  .shelf-search-tab-wrapper {
    position: absolute;
    top: px2rem(52);
    left: 0;
    z-index: 105;
    display: flex;
    width: 100%;
    height: px2rem(42);
    .shelf-search-tab-item {
      flex: 1;
      @include center;
      .shelf-search-tab-text {
        font-size: px2rem(12);
        color: #999;
        &.is-selected {
          color: $color-blue;
        }
      }
    }
  }
}
</style>
